<template>
    <div>
        <div class="flex flex-col w-full overflow-auto h-screen flex-grow item-center  p-0 ">
            <el-menu
                :collapse=false
                :hide-timeout=1000
                :show-timeout=1000
                :unique-opened=true
                active-text-color="#ffd04b"
                background-color="#2e317c"
                class="w-full"
                default-active="2"
                text-color="#fff"

            >
                <el-submenu v-for="(menu,index) in menus" :key="index" :hide-timeout=1000 :index="menu.title"
                            :show-timeout=1000
                >
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        <span>{{ menu.title }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="(item,index) in menu.items" :key="index" :index="item.path"
                                      @click="$router.push({path:item.path})">
                            <span>{{ item.title }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <div class="flex  justify-center items-center text-white  text-center font-semibold ">
                    Copyright ©{{ date }}
                </div>
            </el-menu>
        </div>

    </div>
</template>

<script>
import menus from './menus.js'

export default {
    data() {
        return {
            menus: menus,
            date: '',

        }
    },
    created() {
        this.date = new Date().getFullYear()
    },
    methods: {}
}
</script>

<style scoped>

</style>
